<template>
	<view class="content">
		<view class="top">
			<view class="userInfo d-flex a-center px-3">
				<view class="avatar">
					<image :src="userInfo.avatarUrl" mode=""></image>
				</view>
				<view v-if="token" class="title ml-2">
					{{ userInfo.uid ? userInfo.uid : '暂未设置' }}
				</view>
			</view>
		</view>
		<!--  -->
		<view class="px-3">
			<view class="feature-item my-4 rounded-20">
				<tn-list-cell :unlined="true" :fontSize="30" @click="goToUpdateTip">
					<view class="d-flex j-sb a-center py-2">
						<view class="d-flex a-center">
							<text class="tn-icon-download"></text>
							<view class="font-26 ml-1">
								升级至花瓣记账本
							</view>
						</view>
						<view class="tn-margin-left-sm tn-icon-right"></view>
					</view>
				</tn-list-cell>
			</view>
			<view class="feature-item my-4 rounded-20">
				<button class='btn-sahre' open-type="share">
					<tn-list-cell :unlined="true" :fontSize="30" @click="goToUpdateTip">
						<view class="d-flex j-sb a-center">
							<view class="d-flex a-center">
								<text class="tn-icon-wechat"></text>
								<view class="font-26 ml-1">推荐花瓣记账本给好友</view>
							</view>
							<view class="tn-margin-left-sm tn-icon-right"></view>
						</view>
					</tn-list-cell>
				</button>
			</view>
			<!-- 小工具 -->
			<view @click="goCoupon" class="tool p-3 rounded-20">
				<view class="">
					小工具
				</view>
				<view class="coupon my-1">
					<image src="/static/icon/coupon.png" mode=""></image>
				</view>
				<view class="">
					天天领券
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		shareMixins
	} from '@/common/share.js'
	import {
		login
	} from "@/api/index.js"
	export default {
		mixins: [shareMixins],
		data() {
			return {
				token: null,
				userInfo: uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')) : {},
			}
		},
		onLoad() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		mounted() {
			this.token = uni.getStorageSync('token') ? uni.getStorageSync('token') : null
		},
		// 配置分享信息
		onShareAppMessage(res) {
			console.log('res share', res);
			return {
				title: '花瓣记账', // 分享标题
				path: '/pages/index/index', // 分享路径
				imageUrl: 'https://f.duoduoyxkj.com/hongapps/1043/img/cover.jpg' // 分享封面图
			};
		},
		methods: {

			// 跳转天天神券页面
			goCoupon() {
				uni.navigateTo({
					url: "/pages/my/coupon"
				})
			},
			// 跳转升级至花瓣记账本
			goToUpdateTip() {
				uni.navigateTo({
					url: '/pages/my/updateTip'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh - 172rpx);
		// background-color: palegoldenrod;
		background-color: #F9F9F9;

		.top {
			width: 100%;
			height: 331rpx;
			background: #E74954;
			padding-top: 154rpx;

			.avatar {
				image {
					width: 106rpx;
					height: 106rpx;
					border-radius: 50%;
				}

			}

			.btn-login {
				margin: 0;
				padding: 0;
				border: none;
				background-color: transparent;
				color: white;
				font-size: 46rpx;
				margin-left: 20rpx;

				&:after {
					display: none;
				}
			}

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

		.feature-item {
			overflow: hidden;

			.btn-sahre {
				background-color: #FFFFFF;
				// padding: 26rpx 30rpx;
			}
		}

		.tool {
			background-color: #fff;

			.coupon {
				image {
					width: 95rpx;
					height: 95rpx;
				}
			}
		}
	}

	button {
		// border-radius: 30rpx;
		// height: 80rpx !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		background-color: rgba(0, 0, 0, 0) !important;
		// color: #ababab !important;
		// font-family: PingFang SC !important;
	}

	button:after {
		border: 0 !important;
		box-sizing: border-box;
	}
</style>